<!doctype html>
<html>
    <head>
        <!-- META -->
        <meta charset="utf-8">

        <title>BSTimeline</title>


        <!-- CSS -->
        <!-- <link href="css/Folio.css" rel="stylesheet" type="text/css" /> -->
        <link href="../bower_components/bslib/distribution/bslib.css" rel="stylesheet" type="text/css" />
        <style>
            h6 {
                margin-top: 0px;
                margin-bottom: 0px;
            }

            #title {
                position: absolute;
                left: 36px;
                top: 36px;
                width: 100%;
            }
            #timeline {
                position: absolute;
                left: 36px;
                width: 100%;
            }
            #modules {
                position: absolute;
                left: 36px;
                top: 220px;
                width: 100%;
            }

        </style>


        <meta http-equiv="x-dns-prefetch-control" content="off"/>
    </head>
    <body>


        <!-- BSTIMELINE -->
        <div id="title" class="bs-non-interactive">
            <h6>BSTimeline</h5><br/>
            <h6 class="google-blue-500">Timeline</h6>
        </div>
        <div id="timeline"></div>
        <div id="modules"></div>




        <!-- JAVASCRIPT -->
        <!-- TODO: authorize user in-order to pull from non-public sheets  -->
        <script type="text/javascript" src="./js/tabletop.js"></script>
        <script type="text/javascript" src="./js/sheetsee.js"></script>

        <!-- REQUIRED JS FILES FOR BSTIMELINE -->
        <!-- TODO: eventually concat all of these source files -->
        <script type="text/javascript" src="./js/CSSTwo.js"></script>
        <script type="text/javascript" src="./js/BSTimelineBase.js"></script>
        <script type="text/javascript" src="./js/BSTimelineData.js"></script>
        <script type="text/javascript" src="./js/BSTimeline.js"></script>
        <script type="text/javascript" src="./js/BSTimelineModule.js"></script>
        <script type="text/javascript">
            // ------------------------------------------------------------------------
            //
            // Properties
            //
            // ------------------------------------------------------------------------
            var timeline;
            var tModule;

            var days = 18;
            var num = 3;



            // ------------------------------------------------------------------------
            //
            // Methods
            //
            // ------------------------------------------------------------------------
            function setup(data) {
                // take data from sheetsee
                // clean it up, format it, and add some
                // additional information
                var d = new BSTimelineData(data);
                console.log(d.data());

                var phases = Object.keys(data[0]).length-2; // -date && -rowNumber

                // console.log(d.data());


                // create timeline
                timeline = new BSTimeline(
                    document.getElementById('timeline'), {
                    dateRange: [
                        d.data()['date-first'],
                        d.data()['date-last']
                    ]
                });
                timeline.draw();


                // create phases
                // use the BSTimeline object to drive this
                // TODO: push into main BSTimeline draw() method?
                for (var i = 1; i < d.data().length; i++) {
                    var ddata = d.data()[i];

                    tModule = new BSTimelineModule(
                        document.getElementById('modules'),
                        {
                            // set properties that should apply
                            // to all BSTimelineModule instances
                            margin          : '0px',
                            padding         : '3px',
                            spacing         : timeline.spacing,
                            fontSize        : '12px'
                        }
                    );

                    tModule.draw(
                        0, //timeline.spacing * days * i,
                        parseInt(52 * i, 10),
                        timeline.spacing * days,
                        45,
                        {
                            // set properties that should apply
                            // to specific BSTimelineModule instances
                            // backgroundColor : '#4285f3',
                            color           : 'white',
                            content         : ddata['phases'],
                            classes         : ['google-blue-500', 'bs-non-interactive']
                        }
                    );
                }

            };



            // ------------------------------------------------------------------------
            //
            // Events
            //
            // ------------------------------------------------------------------------
            document.addEventListener('DOMContentLoaded', function() {
                // https://docs.google.com/spreadsheets/d/1gjujfRsb4lcvru3E1Iya7ZN0_uTTCwPhTyVL3_9k23M/pubhtml
                // var URL = '1gjujfRsb4lcvru3E1Iya7ZN0_uTTCwPhTyVL3_9k23M';
                // https://docs.google.com/spreadsheets/d/18WtpUJ3_GAHeATH9Vz4mJT-1KsreKN2BDnD4up-Fjso/pubhtml
                var URL = '18WtpUJ3_GAHeATH9Vz4mJT-1KsreKN2BDnD4up-Fjso';
                Tabletop.init({
                    key         : URL,
                    callback    : setup,
                    simpleSheet : true
                });

            });






        </script>








    </body>
</html>
